/**
 * 接口测试  接口管理
 */
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form ref="searchFrom" :inline="true" :model="formInline" class="user-search">
      <el-form-item prop="uuse" label="搜索：">
        <el-select v-model="formInline.uuse" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="">
        <el-input v-model="formInline.name" size="small" placeholder="服务器名称" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">
          搜索
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-delete" @click="resetForm('searchFrom')">
          重置
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      v-loading="loading"
      size="small"
      :data="listData"
      highlight-current-row
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" prop="id" label="编号" width="60" />
      <el-table-column align="center" label="状态" width="50px">
        <template slot-scope="scope">
          <span v-if="scope.row.uuse === 1">
            <svg
              t="1608775841204"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2578"
              width="20"
              height="20"
            ><path d="M512 985C250.77 985 39 773.23 39 512S250.77 39 512 39s473 211.77 473 473-211.77 473-473 473z" fill="#2F54EB" p-id="2579" /><path d="M391.84 648.34l321.887-321.635c15.627-15.615 40.953-15.605 56.568 0.022 15.615 15.627 15.605 40.953-0.022 56.568L419.957 733.338c-15.679 15.666-41.108 15.597-56.7-0.156L201.571 569.845c-15.541-15.7-15.412-41.027 0.288-56.568 15.7-15.541 41.026-15.413 56.568 0.288L391.84 648.34z" fill="#FFFFFF" p-id="2580" /></svg>
          </span>
          <span v-if="scope.row.uuse === 0">
            <svg
              t="1608775981888"
              class="icon"
              viewBox="0 0 1059 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3602"
              width="20"
              height="20"
            ><path d="M516.447475 100c55.625 0 109.625 10.875 160.375 32.375 49 20.75 93.125 50.5 131 88.375s67.625 82 88.375 131c21.5 50.75 32.375 104.625 32.375 160.375 0 55.625-10.875 109.625-32.375 160.375-20.75 49-50.5 93.125-88.375 131s-82 67.625-131 88.375c-50.75 21.5-104.625 32.375-160.375 32.375-55.625 0-109.625-10.875-160.375-32.375-49-20.75-93.125-50.5-131-88.375S157.447475 721.5 136.697475 672.5c-21.5-50.75-32.375-104.625-32.375-160.375 0-55.625 10.875-109.625 32.375-160.375 20.75-49 50.5-93.125 88.375-131s82-67.625 131-88.375c50.75-21.5 104.625-32.375 160.375-32.375m0-100c-282.75 0-512 229.25-512 512S233.697475 1024 516.447475 1024 1028.447475 794.75 1028.447475 512C1028.447475 229.25 799.197475 0 516.447475 0z" fill="#ABABAB" p-id="3603" /><path d="M494.822475 665.625l-64.875 68.25-68.5-68.25L190.947475 494.875l68.125-68.25L429.947475 597.25l307-307.125 64.875 68.25z" fill="#ABABAB" p-id="3604" /></svg>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="服务器名称" width="230" :show-overflow-tooltip="true" />
      <el-table-column prop="serverAddress" label="服务器地址" width="200" :show-overflow-tooltip="true" />
      <el-table-column prop="spare" label="备注" width="200" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="sServerDelete(scope.$index, scope.row)">
            删除
          </el-button>
          <el-button size="mini" type="success" @click="selectByServer(scope.$index, scope.row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather" />
    <!-- 编辑界面 -->
    <el-dialog
      v-if="editFormVisible"
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" label-width="120px" :model="editForm" :rules="rules">
        <el-form-item label="服务器名称" prop="name">
          <el-input v-model="editForm.name" size="small" auto-complete="off" placeholder="请输入服务器名称" />
        </el-form-item>
        <el-form-item label="服务器地址" prop="serverAddress">
          <el-input v-model="editForm.serverAddress" size="small" auto-complete="off" placeholder="请输入服务器地址" />
        </el-form-item>
        <el-form-item label="备注" prop="spare">
          <el-input v-model="editForm.spare" size="small" auto-complete="off" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">
          取消
        </el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sServerList, sServerSave, updateSServer, deleteSServer, updateUuse } from '../../../api/userMG'
import Pagination from '../../../components/Pagination'
export default {
  // 注册组件
  components: {
    Pagination
  },
  data () {
    return {
      clearable: false, // 清空搜索框
      nshow: true, // switch开启
      fshow: false, // switch关闭
      loading: false, // 是显示加载
      listData: [], // 接口列表数据
      editFormVisible: false, // 控制编辑页面显示与隐藏
      disabled: false, // 是否禁用下拉框
      title: '',
      value1: true,
      // 添加编辑
      editForm: {
        id: '',
        name: '',
        serverAddress: '',
        uuse: '',
        spare: ''
      },
      // 删除接口
      seletedata: {
        id: ''
        // token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        name: [{ required: true, message: '请输入服务器名称', trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 0 到 255 个字符', trigger: 'blur' }],
        serverAddress: [{ required: true, message: '请输入服务器地址', trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 0 到 255 个字符', trigger: 'blur' }],
        spare: [{ required: false, message: '请输入备注信息', trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 0 到 255 个字符', trigger: 'blur' }]
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        uuse: ''
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      // 执行状态
      options: [{
        value: '',
        label: '全部'
      }, {
        value: '0',
        label: '未使用'
      }, {
        value: '1',
        label: '使用中'
      }],
      value: ''
    }
  },
  /**
   * 创建完毕
   */
  created () {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取接口列表
    getdata (parameter) {
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      sServerList(parameter)
        .then((res) => {
          this.loading = false
          // eslint-disable-next-line eqeqeq
          if (res.code != 0) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data.list
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum
            this.pageparm.pageSize = this.formInline.pageSize
            this.pageparm.total = res.data.total
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },

    // 搜索事件
    search () {
      this.formInline.pageNum = 1
      this.getdata(this.formInline)
    },
    // 重置按钮
    resetForm (formName) {
      // 重置要看 <el-form-item>的组件元素上是否指定了字段名。指定了才会重置生效
      this.$refs[formName].resetFields()
      this.formInline.pageNum = 1
      this.getdata(this.formInline)
    },
    // 显示编辑界面
    handleEdit (index, row) {
      this.editFormVisible = true
      if (row !== undefined && row !== 'undefined') {
        this.title = '编辑'
        this.disabled = true
        this.editForm.id = row.id
        this.editForm.name = row.name
        this.editForm.serverAddress = row.serverAddress
        this.editForm.uuse = row.uuse
        this.editForm.spare = row.spare
      } else {
        this.title = '添加'
        this.disabled = false
        this.editForm.id = ''
        this.editForm.name = ''
        this.editForm.serverAddress = ''
        this.editForm.uuse = ''
        this.editForm.spare = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm (editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          if (this.title === '添加') {
            sServerSave(this.editForm)
              .then((res) => {
                this.editFormVisible = false
                this.loading = false
                if (res.code === 0) {
                  this.getdata(this.formInline)
                  this.$message({
                    type: 'success',
                    message: '服务器地址保存成功！'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('服务器地址保存失败，请稍后再试！')
              })
          }
          if (this.title === '编辑') {
            updateSServer(this.editForm)
              .then((res) => {
                this.editFormVisible = false
                this.loading = false
                if (res.code === 0) {
                  this.getdata(this.formInline)
                  this.$message({
                    type: 'success',
                    message: '服务器地址保存成功！'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('服务器地址保存失败，请稍后再试！')
              })
          }
        } else {
          return false
        }
      })
    },
    // 删除接口
    sServerDelete (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // eslint-disable-next-line no-undef
          deleteSServer(row.id)
            .then((res) => {
              if (res.code === 0) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '服务器地址已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            // eslint-disable-next-line handle-callback-err
            .catch((err) => {
              this.loading = false
              this.$message.error('服务器地址删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.pageNum = parm.currentPage
      this.formInline.pageSize = parm.pageSize
      this.getdata(this.formInline)
    },
    // 关闭编辑、增加弹出框、并清空数据
    closeDialog () {
      this.editFormVisible = false
      // this.$refs[formName].resetFields()
      // this.$nextTick(() => {
      //   this.$refs.editForm.resetFields()
      // })
    },
    // 选择要使用的服务器地址
    selectByServer (index, row) {
      this.$confirm('确定要选择吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // eslint-disable-next-line no-undef
          updateUuse(row.id)
            .then((res) => {
              if (res.code === 0) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '服务器地址选中'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            // eslint-disable-next-line handle-callback-err
            .catch((err) => {
              this.loading = false
              this.$message.error('服务器地址选择失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消选择'
          })
        })
    }
  }
}
</script>
<style lang="scss">
.el-input__inner {
  height: 32px !important;
}
</style>
